<template>
	<div class="pay" v-if="walletInfo">
		<van-form @submit="onSubmit">
			<van-field v-model="walletInfo.money" readonly label="当前余额" class="currentMoney" />
			<van-field
				v-model.number="money"
				type="number"
				label="充值金额"
				placeholder="请输入充值金额"
				:rules="rules.money" />
			<van-field name="radio" label="支付方式">
				<template #input>
					<van-radio-group v-model="type" direction="horizontal">
						<van-radio name="wx">微信</van-radio>
						<van-radio name="zfb">支付宝</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<div style="margin: 16px">
				<van-button round block type="primary" native-type="submit"> 确认 </van-button>
			</div>
		</van-form>
	</div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const business = proxy.$cookies.get('business');

const walletInfo = ref(null);

const money = ref();
const type = ref('wx');

const rules = {
	money: [
		{ required: true, message: '请填写充值的金额' },
		{ pattern: /[1-9]|[1-9]\d*/, message: '你填写的充值金额有误' },
	],
};

const getData = async () => {
	const res = await proxy.$GET({
		url: '/business/wallet',
		params: { id: business.id },
	});

	console.log(res);

	if (res.code === 0) {
		proxy.$fail(res.msg);
		return;
	}

	walletInfo.value = res.data;
};

const onSubmit = () => {
	const data = {
		money: money.value,
		type: type.value,
	};

	proxy.$router.push({ path: '/business/checkout', query: data });
};

getData();
</script>

<style scoped>
.currentMoney :deep(.van-field__control) {
	color: #888;
}
</style>
